import { useState, useMemo, useCallback } from "react";
import Counter from "./Counter"; // useReducer
import ThemeComp from "./ThemeComp"; // useContext
import { Theme, ThemeContext, ComplexContext, ComplexComp } from "./ThemeComp";
import InputForm from "./InputForm";
import Parent from "./Parent";
import RefComp from './RefComp';

// 使用 interface 或 type 来描述组件的 props
interface MyButtonProps {
  title: string;
  disabled?: boolean;
  onClick?: Function;
}
function MyButton({ title, disabled = false }: MyButtonProps) {
  return <button disabled={disabled}>{title}</button>;
}

type Status = "idle" | "loading" | "success" | "error";

type RequestState =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: any }
  | { status: "error"; error: Error };

function MyApp() {
  const [enabled, setEnabled] = useState<boolean>(false);
  const [status] = useState<Status>("idle");
  const [requestState] = useState<RequestState>({ status: "idle" });
  const [theme] = useState<Theme>("light");
  const object = useMemo(() => ({ kind: "complex" }), []);

  const memoizedCallback = useCallback(
    (param1: string, param2: number):{ok: boolean} => {
      return { ok: true }
    },
    []
  );

  console.log(memoizedCallback('a', 1))
  return (
    <div>
      <h1>useState</h1>
      <MyButton
        title="我是一个按钮"
        onClick={setEnabled.bind(!enabled)}
      ></MyButton>
      <div>status: {status}</div>
      <h1>useReducer</h1>
      <Counter />
      <div>requestStatus: {requestState.status}</div>
      <h1>useContext</h1>
      <ThemeContext.Provider value={theme}>
        <ThemeComp />
      </ThemeContext.Provider>
      <ComplexContext.Provider value={object}>
        <ComplexComp />
      </ComplexContext.Provider>
      <h1>useCallback</h1>
      <InputForm />
      <h1>子元素</h1>
      <Parent style={{ width: 300, padding: 10, border: "1px solid #999" }}>
        parent-child
      </Parent>
      <h1>useRef</h1>
      <RefComp />
    </div>
  );
}
export default MyApp;
